<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
    Prabhat, initial page, CSS and W3C validation
    Usman, added Javascript
    02/03/11 Prabhat, reviewed Javascript
    Xxx, made page dynamic JSP
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <title>Net-Chat:Login</title>
        <link rel="stylesheet" type="text/css" href="../style/common.css"></link>
        <script type="text/javascript" src="../js/common.js"></script>
        <script type="text/javascript">
            function validate() {
                var sUserid = document.getElementById("userid");
                var sPassword = document.getElementById("password");

                if (isValidUserId(sUserid.value)) {

                    if (isValidPassword(sPassword.value)) {
                        //if form is valid
                        alert("Hah, you should see what's next in Stage 2");
                        // TODO: need to post for in stage 2
                    }
                    else sPassword.focus();
                }
                else {
                    alert("Enter User ID correctly\nIt has to be a number");
                    sUserid.focus();
                }
                return false;
            }
        </script>
    </head>
    <body>
        <div id="container">
            <div id="top">
                <h1>Net-Chat</h1>
            </div>
            <div id="leftnav">
                <p>
                    Welcome! The user logs in to use the chat service on this page. New users can register on <a href="register.htm">this</a> page.
                </p>
            </div>
            <div id="content">
                <h2>Login</h2>
                <form action="" method="post" onsubmit="return validate()">
                    <p>
                        <label class="w120" for="userid">User ID: </label>
                        <input type="text" name="userid" id="userid" />
                        <br />
                        <label class="w120" for="password">Password: </label>
                        <input type="password" name="password" id="password" />
                    </p>
                    <p>
                        <input type="submit" name="login" id="login" value="login" />
                        (New user? <a href="register.htm">Register here</a>)
                    </p>
                    <p>
                        <b>Overview: Synchronous Chat Service</b><br />
                        The project is about the development of a web chat service. It allows registered users to login to the service, choose a forum (channel) of their interest and start to chat with the other users in the same forum. User ID and password authentication are required to use the service. New users can also register. A user can also create a forum which will be listed in a View Forums page where users can join in to chat.
                        <br /><br />
                        On the left, there is a brief description of what each page does.
                        <br />
                        Most CSS are defined in the <a href="../style/common.css">common.css</a> file which is imported in all pages.<br />
                        Common JavaScript validation methods are in <a href="../js/common.js">common.js</a>. Each page also has custom script.
                    </p>
                </form>
            </div>
            <div id="footer">
                <div class="alignleft">&copy; Totoo, Ghaffari, Alzaid, Usman</div>
                <div class="alignright">Network Applications</div>
                <div class="clr"></div>
            </div>
        </div>
        <p class="center">
            <a href="http://validator.w3.org/check?uri=referer">
                <img class="w3img" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" />
            </a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer">
                <img class="w3img" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
            </a>
        </p>
    </body>
</html>